<template>
  <div>
    <a-form-model :model='form' ref='formModal'>
      <a-form-model-item prop='drugIds'>
        <a-transfer
          v-model='form.drugIds'
          :listStyle="{width: '45%',height: '500px'}"
          :dataSource='dataList'
          :titles="['未关联商品', '已关联商品']"
          :filter-option='(inputValue, item) => item.title.indexOf(inputValue) !== -1'
          :target-keys='form.drugIds'
          @change='handleTransferChange'>
          <template slot='children' slot-scope='{props: { direction, filteredItems, selectedKeys },on: { itemSelectAll, itemSelect }}'>
            <a-table
              :row-selection='getRowSelection({ selectedKeys, itemSelectAll, itemSelect })'
              :columns="direction === 'left' ? leftColumns : rightColumns"
              :data-source='filteredItems'
              size='small'
              bordered
              :pagination='false'
              :scroll='{ y:350,x:true }'
              :custom-row='
                ({ key }) => ({
                  on: {
                  click: () => {
                     itemSelect(key, !selectedKeys.includes(key));
                  },
                },
                })'
            >
            <span slot='scopeCode' slot-scope='text, record, index'>
               <a-tag color='#FF0000' v-if='text=="ZS"'>招商</a-tag>
               <a-tag color='#00FF00' v-if='text=="ZY"'>自营</a-tag>
            </span>
            </a-table>
          </template>
        </a-transfer>
      </a-form-model-item>
    </a-form-model>

  </div>
</template>

<script>

import difference from "lodash/difference"
import api from "../../../../js/api"
export default {
  name: "DrugsSetting",
  components: {},
  data() {
    const leftTableColumns = [
      {
        dataIndex: "companyName",
        width:"130px",
        ellipsis: true,
        title: "账套"
      },
      {
        dataIndex: "drugsName",
        width:"130px",
        ellipsis: true,
        title: "商品名称"
      },
      {
        dataIndex: "drugsSpec",
        width:"130px",
        ellipsis: true,
        title: "规格"
      },
      {
        dataIndex: "producersName",
        width:"130px",
        ellipsis: true,
        title: "生产企业"
      }
    ]
    const rightTableColumns = [
      {
        dataIndex: "companyName",
        title: "账套"
      },
      {
        dataIndex: "drugsName",
        title: "商品名称"
      },
      {
        dataIndex: "drugsSpec",
        title: "规格"
      },
      {
        dataIndex: "producersName",
        title: "生产企业"
      }
    ]
    return {
      dataList: [],
      api: Object.assign(api, this.api),
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
      form: {
        policyDrugId: "",
        drugIds: []
      }
    }
  },
  methods: {
    triggerDisable(disabled) {
      this.disabled = disabled
    },

    triggerShowSearch(showSearch) {
      this.showSearch = showSearch
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {

        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows.map(({ key }) => key)
          const diffKeys = selected ? difference(treeSelectedKeys, selectedKeys) : difference(selectedKeys, treeSelectedKeys)
          itemSelectAll(diffKeys, selected)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys
      }
    },
    setData(data) {
      if (data && data.policyDrugId) {
        this.form.policyDrugId = data.policyDrugId
        this.getAuthList()
      }
    },
    handleSubmit() {
      this.$refs["formModal"].validate(valid => {
        if (valid) {
          this.http.post(this, {
            url: this.api.drugs.setAuthDrugs,
            data: {
              policyDrugId: this.form.policyDrugId,
              drugIds: this.form.drugIds.join(",")
            },
            success: function(me) {
            }
          })
        } else {
          return false
        }
      })
    },
    getAuthList() {
      this.http.get(this, {
        url: this.api.drugs.getAuthDrugList,
        data: {
          policyDrugId: this.form.policyDrugId
        },
        success: (me, data) => {
          data.drugList.map(item => {
            item.key = item.drugsId
            item.title = item.drugsName
          })
          me.dataList = data.drugList
          me.form.drugIds = data.drugIds
        }
      })
    },
    handleTransferChange(targetKeys, direction, moveKeys) {
      this.form.drugIds = targetKeys
    }
  }
}
</script>
